<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>媒体查询</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 5rem;
            height: 3rem;
            background-color: red;
        }
        /**
            媒体查询能够检测不同的视口，列如视口的宽度，然后编写差异化的 CSS 样式
            @media (媒体特性) {
                选择器 {
                    CSS属性
                }
            }
         */


        @media(width: 375.33px) {
            body {
                background-color: #ffbc0d;
            }
            html {
                font-size: 37.5px;
            }
        }

        /* 那么就可以写很多个 @media ... 只要写的足够多就能实现移动适配 */
        @media(width: 414px)  {
            body {
                background-color: #ffbc0d;
            }
            html {
                font-size: 41.4px;
            }
        }
    </style>
</head>
<body>
<div class="box">

</div>
</body>
</html>
